<template>
    <div id="dialog-container" v-if="display" @click="onClosed">
        <div id="dialog" @click="contentClicked" :class="{closing: closing}">

        </div>
    </div>
</template>

<style lang="scss" scoped>
$header-height: 40px;

#dialog-container {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.205);
    z-index: 1964;

    margin: {
        top: $header-height;
        bottom: $header-height;
    }

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@keyframes open {
    0% {
        opacity: 0.0;
        transform: rotate(30deg) scale(0.5);
    }
    100% {

    }
}

@keyframes closeing {
    0% {
        
    }
    100% {
        opacity: 0.0;
        transform: rotate(30deg) scale(0.5);
    }
}

#dialog {
    width: 300px;
    height: 150px;
    background-color: red;

    animation: open 0.5s;
}

.closing {
    animation: closeing 0.5s;
}

</style>


<script>
export default {
    model: {
        event: "onClosed",
        prop: "display"
    },
    data(){
        return {
            closing: false
        }
    },
    props: {
        display: {
            type: Boolean,
            required: true
        }
    },
    watch: {
        display(newValue, oldValue) {
            if(!newValue) this.closing = false
        }
    },
    methods: {
        onClosed(){
            this.closing = true
            setTimeout(() => {
                this.$emit("onClosed", false)
            }, 500)
        },
        contentClicked(){

        }
    },
    
}

</script>
